<script setup>
    import Header from '../components/header.vue'
    import articleShow from '../components/articleShow.vue';
    import { useUserStore  } from '../stores/user'
    import { useRoute } from 'vue-router';
    import getUser  from "../api/getuser.js"



    let userInform = useUserStore();
    const use = useRoute();
    import {ref , reactive} from 'vue'
    const loading = ref(true);
    setTimeout(() => {
        loading.value = false ;
    }, 3000);
    try{
        if(userInform.userId === ""){
        getUser({
        }).then(function (response) {
        if(response.status == 200 && response.data.userId!=undefined)
        {
            loading.value = false ;
            userInform.userId = response.data.userId ;
            userInform.username = response.data.userName ;
            userInform.image = response.data.imageId;
            userInform.article =  response.data.articleId ;
        }
        else {
            localStorage.removeItem("jwttoken");
            localStorage.removeItem("userId");
        }
        })
        }
    }
    catch(error)
    {
        loading.value = false ;
        console.error(error);
    }

</script>


<template>
<div v-if="loading"><load/></div>    
<div v-else>
    <el-container>
        <el-header style="z-index: 2;"><Header></Header></el-header>
        <el-main style="margin-top: 5vh; height: 87vh; z-index: 2;"><articleShow :param="use.query.param"></articleShow></el-main>
    </el-container>
</div>
</template>


<style>
</style>